<template>
	<div>
		<h1>订单列表页面</h1>
		<el-tabs v-model="searchObj.status" @tab-click="handleClick">
			<el-tab-pane :label="item.name+'('+item.num+')'" v-for="item in $store.state.order.ordersStatic"
				:name="item.name" :key="item.name"></el-tab-pane>
		</el-tabs>
		<el-form :inline="true" :model="searchObj" class="demo-form-inline" ref="searchForm">
			<el-form-item label="配送方式" prop="pickupInstore">
				<el-radio-group v-model="searchObj.pickupInstore" @change="getOrderList()">
					<el-radio :label="''">全部</el-radio>
					<el-radio :label="0">自提</el-radio>
					<el-radio :label="1">配送</el-radio>
				</el-radio-group>
			</el-form-item> <br>
			<el-form-item label="订单编号" prop="orderNum">
				<el-input v-model="searchObj.orderNum"></el-input>
			</el-form-item>
			<el-form-item label="商品编号" prop="ParentOrderID">
				<el-input v-model="searchObj.ParentOrderID"></el-input>
			</el-form-item>
			<el-form-item label="所属门店" prop="shoppingAdd">
				<el-input v-model="searchObj.shoppingAdd"></el-input>
			</el-form-item> <br />
			<el-form-item label="会员账号" prop="customerId">
				<el-input v-model="searchObj.customerId"></el-input>
			</el-form-item>
			<el-form-item label="收货人" prop="consignee">
				<el-input v-model="searchObj.consignee"></el-input>
			</el-form-item>
			<el-form-item label="下单时间" prop="createStart">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="searchObj.createStart" type="datetime"
					placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item>
			-
			<el-form-item label="" prop="createEnd">
				<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="searchObj.createEnd" type="datetime"
					placeholder="选择日期时间">
				</el-date-picker>
			</el-form-item>

		</el-form>
		<div>
			<el-link type="primary" style="margin-right: 35px;" @click="$refs.searchForm.resetFields();getOrderList()">
				重置</el-link>
			<el-button @click="getOrderList()" type="primary">搜索</el-button>
		</div>

		<download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="'今日订单信息'"
			name="需要导出的表格名字.xls">
			<!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
			<el-button type="success">导出选中的数据</el-button>
		</download-excel>
		<el-table :data="orderList" border style="width: 100%" @selection-change="handleSelectionChange" ref="tab">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="OrderNum" label="订单编号">
			</el-table-column>
			<el-table-column prop="createAt" label="下单时间">
			</el-table-column>
			<el-table-column prop="customerId" label="会员账号">
			</el-table-column>
			<el-table-column prop="total_amount" label="订单总额">
			</el-table-column>
			<el-table-column prop="shoppingAdd" label="所属门店">
			</el-table-column>
			<!-- tempplate 插槽 scope 插槽作用域 scope.row当前行的数据  scope.index当前行的下标-->
			<el-table-column label="订单状态" width="120">
				<template slot-scope="scope">
					<span style="color:limegreen" v-if="scope.row.status==='已完成'">{{scope.row.status}}</span>
					<span style="color:orangered" v-else-if="scope.row.status==='待付款'">{{scope.row.status}}</span>
					<span v-else>{{scope.row.status}}</span>
				</template>
			</el-table-column>
			<el-table-column>
				<template  slot-scope="scope">
					<router-link :to="'/admin/orderdetail/'+scope.row.OrderNum">查看</router-link>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination layout="prev, pager, next" :total="pagnation.total" @current-change="pageChange">
		</el-pagination>
	</div>
</template>

<script>
	import Vue from 'vue';
	import JsonExcel from 'vue-json-excel'
	Vue.component('downloadExcel', JsonExcel)
	// 导入订单请求数据的接口
	import {
		GetOrderList
	} from '@/api/order.js'
	export default {
		methods: {
			pageChange(e) {
				console.log(e);
				// 更新搜索条件的当前页
				this.searchObj.current = e;
				// 获取当前的订单
				this.getOrderList();
			},
			handleSelectionChange(val) {
				console.log("选择", val);
				// 更新导出的数据
				this.DetailsForm = val;
			},
			// 单击顶部tab栏重新获取订单信息
			handleClick(tab, event) {
				console.log(tab, event);
				this.getOrderList();
			},
			// 获取订单信息的方法
			getOrderList() {
				// 修正el的bug
				if (this.searchObj.status == 0 || this.searchObj.status == "全部") {
					this.searchObj.status = "";
				}
				GetOrderList(this.searchObj)
					.then(res => {
						console.log("订单列表信息", res.data)
						this.orderList = res.data.data;
						this.pagnation = res.data.pagnation;
						// 更新导出的数据
						this.DetailsForm = res.data.data;
						this.$refs.tab.toggleAllSelection();
					})
					.catch(err => {
						console.log("获取订单信息失败", err)
					})
			}
		},
		data() {
			return {
				// 定义搜索条件
				searchObj: {
					current: 1, //当前页
					status: "",
					pickupInstore: "",
					orderNum: "",
					ParentOrderID: "",
					shoppingAdd: "",
					customerId: "",
					consignee: "",
					createStart: "",
					createEnd: "",
				},
				// 订单列表
				orderList: [],
				// 分页信息
				pagnation: {},
				//  导出表格的数据
				DetailsForm: [],
				// 导出的表头信息
				json_fields: {
					"订单状态": "status",
					"是否自提": {
						field: "pickupInstore",
						callback: (value) => {
							console.log(value)
							return value == "1" ? '是' : '否';
						},
					},
					"订单编号": "OrderNum",
					"商品编号": "ParentOrderID",
					"用户id": "customerId",
					"收货人": "consignee",
					"所属门店": "shoppingAdd",
					"订单总额": "total_amount",
					"下单时间": "createAt"
				}
			}
		},
		created() {
			// 获取订单列表
			this.$store.dispatch("getOrdersStatic");
		},
		mounted() {
			this.getOrderList();
		},
		watch: {
			"searchObj": {
				// 监听seachObj变化，进行搜索
				handler() {
					this.getOrderList();
				},
				deep: true
			}
		}
	}
</script>

<style>
</style>
